<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游-{$data.fc_title}</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
    <link rel="stylesheet" href="/static/index/css/baseDetail.css">
    <link rel="stylesheet" href="/static/index/css/gonglveDetail.css">

    <link rel="stylesheet" href="/static/index/css/comment_style.css">
    <link rel="stylesheet" href="/static/index/css/comment.css">
    <link rel="stylesheet" href="/static/index/css/jsmodern-1.1.1.min.css">
</head>
<body>

{include file="public/header" model='circle' /}


<div class="searchBox layui-hide-xs">
    <div class="layui-container mbx-top-nav">
        <div class="mianbaoxie-nav">
            <span class="layui-breadcrumb">
              <a href="/">首页</a>
              <a href="{:url('Circle/circleList')}">游圈列表</a>
              <a><cite>{$data.fc_title}</cite></a>
            </span>
        </div>

        <div class="weather">
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=5&py=linyi2" width="200" height="30"
                    frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>

    </div>
</div>

<div class="gonglveBox">
    <div class="layui-container">

        <div class="layui-row layui-col-space12">

            <div class="layui-col-md9">

                <div class="gonglve-box">

                    <div class="gonglve-title">
                        <p>{$data.fc_title}</p>
                        {eq name="is_select" value="0"}
                        <a href="javascript:;" id="toCollect">
                            <i class="layui-icon layui-icon-rate"
                               style="font-size: 16px; color: #F2BF56;margin-right: 2px;"></i>收藏
                        </a>
                        {else/}
                        <a href="javascript:;" style="cursor: auto;">已收藏</a>
                        {/eq}
                    </div>

                    <div class="gonglve-user" style="display: flex;justify-content: space-between">

                        <div class="gonglve-user-l"
                             style="display: flex;justify-content: space-between;align-items: center;">
                            <div class="user-icon">
                                <img src="{$data.user_icon}" alt="">
                            </div>
                            <div class="user-name">{$data.nickname}</div>
                            <div class="create-time">{$data['create_time']}</div>
                        </div>

                        <div class="gonglve-user-r">
                            <span><i class="layui-icon layui-icon-praise"></i>{$data['like_num']*1+$data['set_like_num']*1}</span>
                            <span><i class="layui-icon layui-icon-reply-fill"></i>{$data['read_num']*1+$data['set_read_num']*1}</span>
                            <span><i class="layui-icon layui-icon-share"></i>{$data['share_num']*1+$data['set_share_num']*1}</span>
                        </div>

                    </div>

                    <div class="gonglve-content">


                        <div class="gonglve-content-main">


                            {foreach $data['fc_content'] as $k=>$v}
                            {notempty name="v.data"}
                            <div class="gonglve-text">
                                {$v['data']}
                            </div>
                            {/notempty}

                            {notempty name="v.image"}
                            <div class="gonglve-img">
                                <img src="{$v.image}" alt="">
                            </div>
                            {/notempty}

                            {/foreach}

                        </div>

                        <div class="gonglve-content-end">

                            - END -

                        </div>

                        <div class="leixing" style="border-top: 1px solid #F0F0F0;padding-top:10px;color: #ADADAD;">

                            上传类型：{$data.circle_type}

                        </div>

                    </div>

                </div>

                <div class="art_pingjia">
                    <div class="commentAll">
                        <!--评论区域 begin-->
                        <div class="addComment">
                            <div class="pingjiaText-box">
                                <textarea class="pingjiaText" placeholder="赶紧评论一下吧&hellip;"
                                          onkeyup="keyUP(this)"></textarea>

                            </div>
                            <div class="plBtn-box">
                                <a href="javascript:;" class="plBtn">评论</a>
                            </div>
                        </div>

                        <div class="alreadyComment">
                            <!--评论区域 end-->
                            <div class="comment_back_title">最新评论</div>
                            <!--回复区域 begin-->
                            <div class="comment-show"></div>
                            <!--回复区域 end-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="xiangguan-content">

                    <div class="xiangguan-title">
                        <img src="/static/index/images/hot.png" alt="" style="width: 40px;margin-right: 10px;">
                        热门友圈
                    </div>

                    <div class="xiangguan-tour-list">

                        <ul>

                            {foreach $goodData as $k2 => $v2}
                            <a href="{:url('Circle/circle',['id'=>$v2.f_id])}">
                            <li>

                                <div class="xiangguan-tour-img">
                                    <img src="{$v2.image}" alt="">
                                </div>
                                <div class="xiangguan-tour-info">

                                    <div class="xiangguan-tour-name">
                                        {$v2.fc_title}
                                    </div>
                                    <div class="xiangguan-tour-a" style="color:#ADADAD;font-size: 12px;">
                                        查看详情 >
                                    </div>
                                </div>

                            </li>
                            </a>
                            {/foreach}
                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>
</div>


{include file="public/footer" /}
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.flexText.js"></script>

<!--textarea限制字数-->
<script type="text/javascript">
    $ = layui.jquery;
    var element = layui.element;
    var form    = layui.form;

    form.render();
    element.init();

    function keyUP(t) {
        var len = $(t).val().length;
        if (len > 139) {
            $(t).val($(t).val().substring(0, 140));
        }
    }
</script>
<!--点击评论创建评论条-->
<script type="text/javascript">
    var uid = '{$Think.session.uid}';
    var article_id = '{$data.f_id}';

    var other_id = "{$data.f_id}";
    $('#toCollect').click(function(){

        if (!uid) {
            layer.msg('请先登录',{time:1000});
            return false;
        }

        $.ajax({
                type: "post",
                url: "{:url('Collect/addCollection')}",
                dataType: 'json',
                data: {user_id:uid,other_id:other_id,type:6},

                success:function(res){
                    if (res.code == 200) {
                        console.log(res.code);
                        layer.msg(res.msg,{time:1000},function(){
                            $('#toCollect').html('已收藏');
                            $('#toCollect').css('cursor','');
                            $('#toCollect').attr('id','');
                            
                        });
                       

                    }else{
                        layer.msg(res.msg,{time:1000});
                    }

                }
            });

    });

    $.ajax({
        type:"post",
        url:"{:url('Circle/circleComment')}",
        dataType: 'json',
        data:{id:article_id},
        success:function(data){
            if (data.length == 0){
                $('.comment-show').html('<div id="no-comment-div" style="width:100%;height:200px;line-height: 160px;font-size: 16px;font-weight: bold;text-align: center;color:#dddddd;">暂无评论</div>');
                return false;
            }
            var comment = '';
            $.each(data,function(n,v){
                var hFcomment = '';
                $.each(v.commentHf,function(n1,v1){
                    var at = '<span style="color:#ADADAD;"> 回复 </span><a href="javascript:;" class="atName">'+v1.atName+'</a>：'+v1.hfContent;
                    hFcomment += '<div class="all-pl-con">' +
                        '<div class="pl-text hfpl-text clearfix">' +
                        '<a href="javascript:;" class="comment-size-name">'+ v1.hfName +' </a>' +
                        '<span class="my-pl-con">'+at+'</span>' +
                        '</div>' +
                        '<div class="date-dz">' +
                        '<span class="date-dz-left pull-left comment-time">'+v1.hfTime+'</span>' +
                        '<div class="date-dz-right pull-right comment-pl-block">' +
                        '<input type="hidden" class="this_comment_id" value="'+ v1.hfId +'">' +
                        '<a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>' +
                        '</div>' +
                        '</div>' +
                        '</div>';
                });
                comment += '<div class="comment-show-con clearfix">' +
                    '<div class="comment-show-con-img pull-left">' +
                    '<img src="'+ v.commentIcon +'" alt="">' +
                    '</div>' +
                    ' <div class="comment-show-con-list pull-left clearfix">' +
                    '<div class="pl-text clearfix">' +
                    ' <a href="javascript:;" class="comment-size-name">'+v.commentName+'</a>' +
                    ' : ' +
                    '<span class="my-pl-con">&nbsp;'+ v.commentContent +'</span>' +
                    ' </div>' +
                    ' <div class="date-dz">' +
                    ' <span class="date-dz-left pull-left comment-time">'+v.commentTime+'</span> ' +
                    '<div class="date-dz-right pull-right comment-pl-block">' +
                    '<input type="hidden" class="this_comment_id" value="'+ v.commentId +'">' +
                    '<a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>' +
                    ' </div>' +
                    ' </div>' +
                    '<div class="hf-list-con">'+hFcomment+'</div>' +
                    '</div>' +
                    ' </div>';
            });

            $('.comment-show').html(comment);
        }
    });

    $('.commentAll').on('click', '.plBtn', function () {
        if (!uid) {
            layer.msg('请先登录', {time: 1000});
            return false;
        }
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        if (m < 10) m = '0' + m;
        var s = myDate.getSeconds();
        if (s < 10) s = '0' + s;
        var now = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
        //获取输入内容
        var oSize = $('.pingjiaText').val();

        //动态创建评论模块
        if (oSize.replace(/(^\s*)|(\s*$)/g, "") != '') {

            var thisElment = $(this);
            $.ajax({
                type: "post",
                url: "{:url('Circle/addComment')}",
                dataType: 'json',
                data: {id: article_id, content: oSize, type: 2},
                success: function (res) {
                    if (res.code == '200') {
                        $('#no-comment-div').hide();
                        oHtml = '';

                        oHtml += '<div class="comment-show-con clearfix">';
                        oHtml += '<div class="comment-show-con-img pull-left">';
                        oHtml += '<img src="{$Think.session.user_icon}" alt="">';
                        oHtml += '</div>';
                        oHtml += '<div class="comment-show-con-list pull-left clearfix">';
                        oHtml += '<div class="pl-text clearfix">';
                        oHtml += '<a href="javascript:;" class="comment-size-name">{$Think.session.nickname}</a>';
                        oHtml += ':';
                        oHtml += '<span class="my-pl-con">' + oSize + '</span>';
                        oHtml += '</div>';
                        oHtml += '<div class="date-dz">';
                        oHtml += '<span class="date-dz-left pull-left comment-time">' + now + '</span>';
                        oHtml += '<div class="date-dz-right pull-right comment-pl-block">';

                        oHtml += '<input type="hidden" class="this_comment_id" value="' + res.id + '">';

                        oHtml += '<a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>';
                        oHtml += '</div>';
                        oHtml += '</div>';
                        oHtml += '<div class="hf-list-con"></div>';
                        oHtml += '</div>';
                        oHtml += '</div>';

                        thisElment.parents('.commentAll ').children('.alreadyComment').children('.comment_back_title').siblings('.comment-show').prepend(oHtml);
                        $('.pingjiaText').val('');
                    } else {
                        layer.msg('评论失败', {time: 1500});
                    }

                }
            });
        }
    });
</script>
<!--点击回复动态创建回复块-->
<script type="text/javascript">
    $('.comment-show').on('click', '.pl-hf', function () {
        if (!uid) {
            layer.msg('请先登录', {time: 1000});
            return false;
        }
        //获取回复人的名字
        var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        // console.log(fhName);
        //回复@
        var fhN = '回复@' + fhName + ' : ';
        //console.log(fhN);
        //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
        var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" placeholder="" onkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="hf-pl">评论</a></div>';
        //显示回复
        if ($(this).is('.hf-con-block')) {
            $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
            $(this).removeClass('hf-con-block');
            $('.content').flexText();
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding', '50px 15px');
            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
            //input框自动聚焦
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
        } else {
            $(this).addClass('hf-con-block');
            $(this).parents('.date-dz-right').siblings('.hf-con').remove();
        }
    });
</script>
<!--评论回复块创建-->
<script type="text/javascript">
    $('.comment-show').on('click', '.hf-pl', function () {
        if (!uid) {
            layer.msg('请先登录', {time: 1000});
            return false;
        }
        var oThis = $(this);
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        if (m < 10) m = '0' + m;
        var s = myDate.getSeconds();
        if (s < 10) s = '0' + s;
        var now = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
        //获取输入内容
        var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
        var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        var oAllVal = '回复@' + oHfName;
        if (oHfVal.replace(/^ +| +$/g, '') == '' || oHfVal == oAllVal) {

        } else {
            var comment_content_arr = oHfVal.split(':');
            var comment_content = comment_content_arr[1];
            comment_content = comment_content.replace(/^\s+|\s+$/g, "");

            oAt = '<span style="color:#ADADAD;"> 回复 </span><a href="javascript:;" class="atName">' + oHfName + '</a> : ' + comment_content;

            //获取要回复的评论
            var the_comment_id = oThis.parents('.date-dz').children('.date-dz-right').children('.this_comment_id').val();

            $.ajax({
                type: "post",
                url: "{:url('Circle/addCircleReplay')}",
                dataType: 'json',
                data: {content: comment_content, pid: the_comment_id, type: 2},
                success: function (res) {
                    if (res.code == '200') {
                        var oHtml = '';
                        oHtml += '<div class="all-pl-con">' +
                            '<div class="pl-text hfpl-text clearfix">' +
                            '<a href="javascript:;" class="comment-size-name">{$Think.session.nickname}</a>' +
                            '<span class="my-pl-con">' + oAt + '</span>' +
                            '</div>' +
                            '<div class="date-dz">' +
                            '<span class="date-dz-left pull-left comment-time">' + now + '</span>' +
                            '<div class="date-dz-right pull-right comment-pl-block">' +
                            '<input type="hidden" class="this_comment_id" value="' + res.id + '">' +
                            '<a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                        oThis.parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display', 'block').prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();
                    } else {
                        layer.msg('评论失败', {time: 1500});
                    }
                }
            });
        }
    });
</script>
<!--删除评论块-->
<script type="text/javascript">
    $('.commentAll').on('click', '.removeBlock', function () {
        var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
        if (oT.siblings('.all-pl-con').length >= 1) {
            oT.remove();
        } else {
            $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display', 'none')
            oT.remove();
        }
        $(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();

    })
</script>
</body>
</html>